<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app-7">
			<ol>
				<!-- 现在我们为每个 todo-item 提供 todo 对象, todo 对象是变量, 即其内容可以是动态的. 我们也需要为每个组件提供一个"key", 稍后再作详细解释 -->
				<todo-item 
				v-for="item in groceryList"
				v-bind:todo="item"
				v-bind:key="item.id">
				</todo-item>
			</ol>
			
			<ul>
				<todo-item
				v-for="obj in itemList"
				v-bind:todo="obj"
				v-bind:todo2="obj.text"
				v-bind:key="obj.id">
				</todo-item>
			</ul>
		</div>
		
		<script type="text/javascript">
			// 创建一个新的vue组件, 名称为todo-item
			Vue.component('todo-item', {
				// 组件中的todo属性被引用到这里
				props: ['todo'],
				// 使用todo属性的值来编写模板代码
				template: '<li>{{todo.text}}</li>'
			})
			
			var app7 = new Vue({
				el: '#app-7',
				data: {
					groceryList: [
						{id: 0, text: '苹果'},
						{id: 1, text: '香蕉'},
						{id: 2, text: '草莓'}
					],
					itemList: [
						{id: 3, text: '天黑'},
						{id: 4, text: '天亮'},
						{id: 5, text: '睡了'}
					]
				}
			})
		</script>
	</body>
</html>
